<script setup>
import { GridLayout, GridItem } from 'vue3-grid-layout-next';

const props = defineProps({
	layout: {
		type: Array,
		default: () => [],
	},
});
</script>

<template>
	<grid-layout
		:layout.sync="props.layout"
		:col-num="12"
		:row-height="230"
		:is-draggable="false"
		:is-resizable="false"
		:is-mirrored="false"
		:vertical-compact="true"
		:margin="[10, 10]"
		:use-css-transforms="false"
	>
		<grid-item v-for="item in props.layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
			<component :is="item.component" />
		</grid-item>
	</grid-layout>
</template>

<style scoped></style>
